<template>
  <main-layout title="注册" :showBack="true">
    <div class="edit-box">
      <van-form @submit="onSubmit">
        <!-- 基本信息 -->
        <div class="formTitle">基本信息</div>
        <van-field
          v-model="formObj.id"
          type="text"
          label="用户编码"
          placeholder="请输入用户编码"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="formObj.name"
          type="text"
          label="用户姓名"
          placeholder="请输入用户姓名"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="formObj.password"
          type="text"
          label="用户密码"
          placeholder="请输入用户密码"
          :rules="[{ required: true }]"
        />
        <van-field
          type="text"
          label="用户性别"
          :rules="[{ required: true, message: '请选择用户性别' }]"
        >
          <template #input>
            <van-radio-group v-model="formObj.sex" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
              <van-radio name="保密">保密</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="formObj.birthday"
          type="text"
          label="用户生日"
          placeholder="请选择用户生日"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="timeShow = true"
              >选择日期</van-button
            >
          </template>
        </van-field>

        <van-field
          v-model="formObj.phone"
          type="number"
          autosize
          label="电话号码"
          placeholder="请输入电话号码"
          :rules="[
            { required: true },
            { pattern, message: '请输入正确的联系电话' },
          ]"
        />
        <van-field
          v-model="formObj.email"
          type="text"
          label="电子邮箱"
          placeholder="请输入电子邮箱"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="formObj.role"
          type="text"
          label="用户权限"
          placeholder="请选择用户权限"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="roleShow = true"
              >选择权限</van-button
            >
          </template>
        </van-field>

        <div style="margin: 12px 0px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#ff5b02"
            >提交</van-button
          >
        </div>
      </van-form>

      <!-- 选择日期组件 -->
      <van-popup
        v-model="timeShow"
        round
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '45%' }"
      >
        <van-datetime-picker
          type="date"
          v-model="currentDate"
          title="选择创建时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onPickTime"
          @cancel="timeShow = false"
          color="#ff5b02"
        />
      </van-popup>
      <!-- 选择权限组件 -->
      <van-popup
        v-model="roleShow"
        round
        position="left"
        :style="{ height: '100%', width: '90%' }"
      >
        <purchase-edit
          btnType="register"
          @dataToEdit="dataToEdit"
        ></purchase-edit>
      </van-popup>
    </div>
  </main-layout>
</template>
<script>
import { registerApi } from "../../apis/LoginApi";
import { dateFormat } from "../../util/index";
export default {
  data() {
    return {
      // 正则校验电话号码输入是否正确
      pattern: /^1[3-9]{1}[0-9]{9}$/,
      // 选择时间区间
      minDate: new Date(1945, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      timeShow: false,
      roleShow: false,
      formObj: {
        id: "",
        name: "",
        password: "",
        photo: "",
        sex: "",
        address: "",
        birthday: "",
        dept: "",
        duties: "",
        phone: "",
        email: "",
        role: "",
        mark: "",
      },
    };
  },

  methods: {
    async onSubmit() {
      let result = await registerApi(this.formObj);
      if (result.code === 200) {
        this.$toast.success("注册成功");
      } else {
        this.$toast.fail("注册失败");
      }
    },
    // 获取时间
    onPickTime(date) {
      this.timeShow = false;
      this.formObj.birthday = dateFormat(date, "yyyy-MM-dd");
    },
    // 选择回调
    // 点击要选择的项，将值赋值
    dataToEdit(user, itemShow) {
      if (this.roleShow) {
        this.formObj.role = user.id;
        this.roleShow = itemShow;
      }
    },
  },
};
</script>